/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018-12-15 Time: 23:16
 *
 * 取消清洁工单
 */

import React, {Component} from 'react';
import {
    SafeAreaView,
    View,
    Text,
    TouchableOpacity,
    TextInput, ToastAndroid,
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './CancelSweepOrderScreen.Style';
import {COLOR_WHITE, FONT_COLOR_SUB_TITLE, FONT_SIZE_TITLE } from "../../../../constant/PHColors"
import {cancelSweepOrder} from "./Actions"
import {FetchStatus} from "../../../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../../../configuration/ReturnStatus";
import {doDisplaySuccessMessage, doDisplayWarnMessage} from "../../../../component/Message/Action";
import PropTypes from "prop-types";

class CancelSweepOrderScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        title: '取消原因',
    });

    //构造
    constructor(props) {
        super(props);
        this.state = {
            remark:'',
            active:'',
            orderid:this.props.navigation.getParam("orderid"),
        }
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;

        if (nextProps.onChangeSweepOrderStatus !== this.props.onChangeSweepOrderStatus && nextProps.onChangeSweepOrderStatus.fetchStatus === FetchStatus.Success) {
            if (nextProps.onChangeSweepOrderStatus.RETURN === ReturnStatus.Success) {
                // ToastAndroid.show(nextProps.onChangeSweepOrderStatus.MSG, 1000);//提示
                doDisplaySuccessMessage(nextProps.onChangeSweepOrderStatus.MSG);
                this.props.navigation.navigate(this.props.navigation.getParam("page"));
                this.props.navigation.state.params.goBack();
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onChangeSweepOrderStatus.MSG))
            }
        }
    }

    componentDidMount(): void {

    }

    render(){
        return (
            <SafeAreaView style={styles.body}>
                <View style={styles.bodyTitle}>
                    <Text style={styles.bodyTitleText}>
                        请选择无需清洁原因：
                    </Text>
                </View>
                {/* 填写原因 */}
                <View style={styles.bodyContainer}>
                    <View style={styles.radioBox}>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            let active = '有人在住没法清洁';
                            if(this.state.active==='有人在住没法清洁'){
                                active = ''
                            }
                            this.setState({
                                active:active,
                            })
                        }}>
                            <View style={styles[(this.state.active==='有人在住没法清洁')?'radioButtonActive':'radioButton']} >
                                <Text style={{fontSize: FONT_SIZE_TITLE,color:(this.state.active==='有人在住没法清洁')?'#fff':'#969696'}}>
                                    有人在住没法清洁
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            let active = '分配错了房间';
                            if(this.state.active==='分配错了房间'){
                                active = ''
                            }
                            this.setState({
                                active:active,
                            })
                        }}>
                            <View style={styles[(this.state.active==='分配错了房间')?'radioButtonActive':'radioButton']}>
                                <Text style={{fontSize: FONT_SIZE_TITLE,color:(this.state.active==='分配错了房间')?'#fff':'#969696' }}>
                                    分配错了房间
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            let active = '房间没人住过';
                            if(this.state.active==='房间没人住过'){
                                active = ''
                            }
                            this.setState({
                                active:active,
                            })
                        }}>
                            <View style={styles[(this.state.active==='房间没人住过')?'radioButtonActive':'radioButton']}>
                                <Text style={{fontSize: FONT_SIZE_TITLE,color:(this.state.active==='房间没人住过')?'#fff':'#969696'}}>
                                    房间没人住过
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            let active = '工程问题无法清洁';
                            if(this.state.active==='工程问题无法清洁'){
                                active = ''
                            }
                            this.setState({
                                active:active,
                            })
                        }}>
                            <View style={styles[(this.state.active==='工程问题无法清洁')?'radioButtonActive':'radioButton']}>
                                <Text style={{fontSize: FONT_SIZE_TITLE,color:(this.state.active==='工程问题无法清洁')?'#fff':'#969696'}}>
                                    工程问题无法清洁
                                </Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.inputBox}>
                        <TextInput
                            multiline={true}
                            maxLength={50}
                            style={{
                                fontSize: 20,
                                padding: 0,
                                height:100,
                                textAlignVertical: "top",
                            }}
                            placeholder='可输入其他原因'
                            keyboardType={'default'}
                            autoFocus={false}
                            underlineColorAndroid={'transparent'}
                            onChangeText={text => {
                                if(text.length>50){
                                    text = text.substring(0,50)
                                }
                                this.setState({
                                    remark:text,
                                })
                            }}
                        />
                        <View style={styles.textInputRight}>
                            <Text style={{fontSize: FONT_SIZE_TITLE, color: FONT_COLOR_SUB_TITLE}}>
                                {this.state.remark.length}
                                <Text style={{fontSize: FONT_SIZE_TITLE, color: FONT_COLOR_SUB_TITLE}}>
                                    /50
                                </Text>
                            </Text>
                        </View>
                    </View>
                    <View style={styles.bottomButtonBox}>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            this._submitClick()
                        }}>
                            <View style={styles.bottomButton}>
                                <Text style={{fontSize: 20, color: '#fff'}}>
                                    确定
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => {
                            this.props.navigation.navigate(this.props.navigation.getParam("page"));
                        }}>
                            <View style={styles.bottomButton}>
                                <Text style={{fontSize: 20, color: '#fff'}}>
                                    取消
                                </Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </SafeAreaView>
        )
    }

    _submitClick=()=>{
        let {dispatch} = this.props;
        let remark = this.state.active+this.state.remark
        let str = {"whsk_Order_Sweep_event":{"orderid":this.state.orderid,"remark":remark},"whsk_Order_event":{"operation":"无需清洁"}};
        dispatch(cancelSweepOrder(JSON.stringify(str)));
    }

}

const props = state => {
    return {
        onChangeSweepOrderStatus:state.onChangeSweepOrderStatus
    }
};

export default CancelSweepOrderScreen = connect(props)(CancelSweepOrderScreen);
